<template>
  <van-tabbar active="active" bind:change="onChange">
    <navigator url="/pages/index">
    <van-tabbar-item>
        <image slot="icon" :src="icon.normal" mode="aspectFit"/>
        <image slot="icon-active" :src="icon.active" mode="aspectFit"/>
        首页
      </van-tabbar-item>
    </navigator>
    <navigator url="/pages/index">
    <van-tabbar-item>
       <image slot="icon" :src="icon.normal" mode="aspectFit"/>
       <image slot="icon-active" :src="icon.active" mode="aspectFit"/>
       分类
     </van-tabbar-item>
    </navigator>
    <navigator url="../pages/shoppingcart/shoppingcart">
    <van-tabbar-item info="3">
      <!--<image slot="icon" :src="icon.normal" mode="aspectFit"/>-->
      <!--<image slot="icon-active" :src="icon.active" mode="aspectFit"/>-->
      购物车
    </van-tabbar-item>
    </navigator>
    <navigator url="/pages/index">
    <van-tabbar-item>
      <image slot="icon" :src="icon.normal" mode="aspectFit"/>
      <image slot="icon-active" :src="icon.active" mode="aspectFit"/>
      我的
    </van-tabbar-item>
    </navigator>
  </van-tabbar>
</template>

<script>
  export default {
    name: 'tabBar',

    data () {
      return {
        // active: 0,
        // icon: {
        //   normal: '//img.yzcdn.cn/icon-normal.png',
        //   active: '//img.yzcdn.cn/icon-active.png'
        // }
      }
    },
    method: {
      // onChange (event) {
      //   console.log(event.detail)
      // }
    }
  }
</script>

<style>
.tabbaricon{display: block;width: 48px;height: 48px;background: red}
</style>
